<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云朵登录</title>
    <style>

        .yunduo_form {
            border: 1px rgb(76, 227, 182) solid;
            border-radius: 5px;
            padding: 4px;
            width: 300px;
        }

        .yunduo_form .yunduo_form_item {
            display: flex;
            justify-content: flex-start;
        }

        .yunduo_form .yunduo_form_item .yunduo_form_item_label {
            width: 100px;
        }

      




    </style>
</head>
<body>
    <div class="yunduo_container_base">
        <form class="yunduo_form" id="loginForm">
            <div class="yunduo_form_item" >
                <div class="yunduo_form_item_label">
                    用户名：
                </div>
                <div class="yunduo_form_item_content">
                    <input type="text" name="username" value="菜就多练" class="yunduo_form_item_content_input">
                </div>
            </div>

            <div class="yunduo_form_item" >
                <div class="yunduo_form_item_label">
                    密码：
                </div>
                <div class="yunduo_form_item_content">
                    <input type="password" name="password" value="1" class="yunduo_form_item_content_input">
                </div>
            </div>
            <div class="yunduo_form_item" >

                <button type="button" onclick="submitEvent(this)">登录</button>
            </div>

        </form>
    </div>
    <script>
        const queryData = new URLSearchParams(window.location.search);
        function submitEvent(){
            const data = new FormData(document.getElementById("loginForm"))
            data.set("grant_type",queryData.get("grant_type") || "password")
            const cb = queryData.get("callback");
            if(cb){
                data.set("callback",cb)
            }
            const clientId = queryData.get("client_id");
            const clientSecret = queryData.get("client_secret");
            if(!clientId){
                alert("client_id不能为空")
                return
            }
            if(!clientSecret){
                alert("client_secret不能为空")
                return
            }
            if(!data.get("username")){
                alert("请输入用户名")
                return
            }

            if(!data.get("password")){
                alert("请输入密码")
                return
            }
            data.set("grant_type",queryData.get("grant_type") || "password")
            fetch("/auth/oauth2/token", {
                method: "POST",
                headers: {
                    'Authorization': "Basic " +btoa(clientId + ":"+ clientSecret)
                },
                body: data
            }).then(res => res.json()).then((res) => {
                console.log(res, "登录成功02");
                const callback = queryData.get("callback");
                if(callback){
                    window.location.href = callback
                }else{
                    const redirect = res.redirect_urils || []
                    if (redirect.length){
                        window.location.href = redirect[0]
                    }else{
                        alert("登陆成功，未提供回调地址无法跳转")
                    }
                }
            }).catch((e) => {
                console.error(e, "异常");

            })
            
            
        }



    </script>
</body>
</html>